import React, { Component } from 'react';

import {Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn} from 'material-ui/Table';
import FloatingActionButton from 'material-ui/FloatingActionButton';
import ContentAdd from 'material-ui/svg-icons/content/add';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import TextField from 'material-ui/TextField';
import RaisedButton from 'material-ui/RaisedButton';

import store from '../../stores/main';

import { getPartnersAPI, postNewPartners, getHotelListBySearchKey } from '../../services/API';
import R from 'ramda';

import Waiting from '../Waiting';
import Alert from '../Alert';

export default class Partners extends Component {

    componentWillMount () {
      this.setState(store.dispatch({type:'OPEN_WAITING'}));
      this.getOrdersInfo();
    }

    getOrdersInfo () {
      this.setState(store.dispatch({type:'OPEN_WAITING'}));
      getPartnersAPI((res, err) => {
        if(err) {
          this.setState(store.dispatch({type:'OPEN_ALERT', re:err}));
        } else {
          if(res.statusNo == 200) {
            this.setState(store.dispatch({type: 'GET_PARTNER_INFO', data: res.data}));
          } else {
            this.setState(store.dispatch({type:'OPEN_ALERT', re: res.msg}));
          }
        }
      })
    }

    constructor(props) {
        super(props);
        this.state = {
            open: false
        }
    }

    openAddPartner () {
        this.setState({open: true});
    }

    closeAddPartner () {
        this.setState({open: false});
    }

    changePartnerInfo (type, e, value) {
      this.setState(store.dispatch({type: 'SET_PATNER_INFO', data: {ele: type, val: value}}));
    }

    addNewPartners () {
      this.setState(store.dispatch({type:'OPEN_WAITING'}));
      postNewPartners(store.getState().partner, (err, res) => {
        if(err) {
          this.setState(store.dispatch({type:'OPEN_ALERT', re:err}));
        } else {
          if(res.statusNo == 200) {
            this.setState({open: false});
            this.setState(store.dispatch({type: 'OPEN_ALERT', re: '添加成功!'}));
            this.getOrdersInfo();
          } else {
            this.setState(store.dispatch({type:'OPEN_ALERT', re: res.msg}));
          }
        }
      })
    }

    render() {
        var state = store.getState();
        var partners = R.defaultTo([])(state.partners);

        const floatAddBtnStyle = {
            position: 'fixed',
            bottom: 50,
            right: 50
        };

        const addBtnStyle = {
            marginRight: 20
        };

        const actions = [
            <RaisedButton
                label="添加"
                primary={true}
                style={addBtnStyle}
                onTouchTap={this.addNewPartners.bind(this)}
                />,
            <FlatButton
                label="取消"
                primary={true}
                keyboardFocused={true}
                onTouchTap={this.closeAddPartner.bind(this)}
                />

        ];

        const customContentStyle = {
            width: '350px'
        };

        return (
            <div>
                <Table>
                    <TableHeader displaySelectAll={false} adjustForCheckbox={false}>
                        <TableRow>
                            <TableHeaderColumn style={{width: 5}}>伙伴ID</TableHeaderColumn>
                            <TableHeaderColumn>伙伴名称</TableHeaderColumn>
                            <TableHeaderColumn>联系电话</TableHeaderColumn>
                            <TableHeaderColumn style={{width: 125}}>联系人</TableHeaderColumn>
                            <TableHeaderColumn>地区</TableHeaderColumn>
                            <TableHeaderColumn>备注</TableHeaderColumn>
                            <TableHeaderColumn>创建时间</TableHeaderColumn>
                        </TableRow>
                    </TableHeader>
                    <TableBody displayRowCheckbox={false} showRowHover={true}>
                      {
                        partners.map((val, ind) => {
                          return (
                            <TableRow key={ind}>
                              <TableRowColumn style={{width: 5}}>{val.dealerId}</TableRowColumn>
                              <TableRowColumn>{val.dealerName}</TableRowColumn>
                              <TableRowColumn>{val.phone}</TableRowColumn>
                              <TableRowColumn style={{width: 125}}>{val.content}</TableRowColumn>
                              <TableRowColumn>{val.area}</TableRowColumn>
                              <TableRowColumn>{val.remark}</TableRowColumn>
                              <TableRowColumn>{val.createTime}</TableRowColumn>
                            </TableRow>
                          )
                        })
                      }

                    </TableBody>
                </Table>
                <FloatingActionButton style={floatAddBtnStyle} onTouchTap={this.openAddPartner.bind(this)}>
                    <ContentAdd />
                </FloatingActionButton>
                <Dialog
                    title="添加伙伴"
                    actions={actions}
                    modal={false}
                    open={this.state.open}
                    onRequestClose={this.closeAddPartner.bind(this)}
                    contentStyle={customContentStyle}
                    >
                    <TextField hintText="伙伴名称" onChange={this.changePartnerInfo.bind(this, 'dealerName')}/> <br/>
                    <TextField hintText="电话(手机)" maxLength={25} onChange={this.changePartnerInfo.bind(this, 'phone')}/> <br/>
                    <TextField hintText="联系人" onChange={this.changePartnerInfo.bind(this, 'content')}/> <br/>
                    <TextField hintText="地区" onChange={this.changePartnerInfo.bind(this, 'area')}/> <br/>
                    <TextField hintText="备注" onChange={this.changePartnerInfo.bind(this, 'remark')}/>
                </Dialog>
              <Waiting />
              <Alert />
            </div>
        )
    }
}
